<template>
  <el-form ref="form"
           :model="infoForm"
           label-width="85px"
           size="small"
           :rules="rules">
    <el-row>
      <el-col :span="6">
        <el-form-item label="所属县:">
          <cities-con @mychange="handleGetCode"
                      :selected-options="infoForm.addvcd"></cities-con>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="责任区域:"
                      prop="territory">
          <el-select v-model="infoForm.territory"
                     placeholder="责任区域">
            <el-option v-for="item in options.territory"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="上报单位:"
                      prop="submittedName">
          <el-input v-model="infoForm.submittedName"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label="上报编码:"
                      v-if="mode === 2">
          <el-input v-model="infoForm.submittedUnit"
                    disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="启用:"
                      v-if="mode === 2">
          <el-switch v-model="infoForm.isEnabled"
                     active-value="TRUE"
                     inactive-value="FALSE"
                     active-color="#13ce66"
                     inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
// import Mement from 'moment'
import { mapGetters } from 'vuex'
import { addReported } from '@/api/site'
import CitiesCon from '@/components/city/cities'
export default {
  components: {
    CitiesCon
  },
  props: {
    clienInfo: Object,
    mode: Number
  },
  data() {
    return {
      // 选项
      options: {
        territory: []
      },
      selectedOptions: [],
      // 表单验证规则
      rules: {
        addvcd: [
          { required: true, message: '请输入内容!', trigger: 'blur' }
        ],
        territory: [
          { required: true, message: '请输入内容!', trigger: 'blur' }
        ],
        submittedName: [
          { required: true, message: '请输入内容!', trigger: 'blur' }
        ]
      },
      // 表单数据
      infoForm: {}
    }
  },
  computed: {
    ...mapGetters([
      'appEnum'
    ])
  },
  mounted() {
    this.initEnum()
    this.infoForm = this.clienInfo
  },
  methods: {
    addReported() {
      this.$refs.form.validate(valid => {
        if (valid) {
          addReported(this.infoForm).then(res => {
            if (res.data.success) {
              if (res.data.data) {
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                })
                this.$emit('close-detail')
              }
            }
          })
        }
      })
    },
    handleGetCode(value) {
      this.infoForm.addvcd = value
    },
    // 初始化下拉菜单
    initEnum() {
      this.options.territory = this.appEnum.territory
    },
    // 重置验证
    fromResetField() {
      this.$refs.form.resetFields()
    }
  },
  watch: {
    clienInfo() {
      this.infoForm = this.clienInfo
    }
  }
}
</script>
